import {
  RiSoundModuleFill,
  RiCloseCircleLine,
} from '@remixicon/react'
import { NoticeBar } from '@/library/gallery/components/NoticeBar'
import { Space } from '@/library/gallery/components/Space'
import { DemoBlock } from '@/library/widgets/DemoBlock'

const demoLongText = 'consectetur voluptate culpa pariatur id 适用于当前页面内信息的通知，是一种较醒目的页面内通知方式'

export default () => (
  <>
    <DemoBlock title="通告栏语义" padding="0" background="transparent">
      <Space block direction="vertical">
        <NoticeBar content="默认" type="default" />
        <NoticeBar content="警告" type="alert" />
        <NoticeBar content="错误" type="error" />
        <NoticeBar content="信息" type="info" />
      </Space>
    </DemoBlock>

    <DemoBlock title="可关闭" padding="0">
      <NoticeBar content="这条通知可以关闭" type="alert" closeable />
    </DemoBlock>

    <DemoBlock title="超长滚动" padding="0">
      <NoticeBar content={demoLongText} type="alert" />
    </DemoBlock>

    <DemoBlock title="多行展示" padding="0">
      <NoticeBar
        content="适用于当前页面内信息的通知，是一种较醒目的页面内通知方式适用于当前页面内信息的通知，是一种较醒目的页面内通知方式"
        wrap
        type="alert"
      />
    </DemoBlock>

    <DemoBlock title="自定义" padding="0" background="transparent">
      <Space block direction="vertical">
        <NoticeBar
          extra={<RiCloseCircleLine size={14} />}
          icon={<RiSoundModuleFill size={14} />}
          content="自定义图标"
        />
        <NoticeBar
          extra={(
            <Space style={{ '--gap': '12px' }}>
              <span>查看</span>
              <span>关闭</span>
            </Space>
          )}
          content="中医（Traditional Chinese Medicine,TCM），有四大经典著作，《黄帝内经》《难经》《伤寒杂病论》和《神农本草经》。其中，《黄帝内经》成书最早，内容最多，成为中国医学宝库的经典。《伤寒论》以《汤液经法》为基础而成书，《汤液经法》相传为商代宰相伊尹所著"
          type="alert"
        />
      </Space>
    </DemoBlock>
  </>
)
